<template>
  <div class="shotbox">
    <div class="title2">
      {{title}}
    </div>
    <div class="photo-list">
      <div class="card-carousel-wrapper">
        <div class="card-carousel--nav__left" @click="moveCarousel(-1)" :disabled="atHeadOfList"></div>
        <div class="card-carousel" :style="{width:carouselWidth + 'px'}">
          <div class="card-carousel--overflow-container">
            <div class="card-carousel-cards" :style="{ transform: 'translateX' + '(' + currentOffset + 'px' + ')'}">
              <div class="card-carousel--card" style="width: 200px;height: 150px;" v-for="item in items" :key="item.title">
                <img style="width: 100%;" :src="url + item.filePath"  @click="goPicDetail(item)">
                <!-- <div style="width: 100%;" @click="goPicDetail(item)">{{ item }}</div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="card-carousel--nav__right" @click="moveCarousel(1)" :disabled="atEndOfList"></div>
      </div>
    </div>
  </div>
</template>
<script>
import {getAlbumlist} from '@/api/official'
import http from '@/utils/baseUrl'
export default {
  props:{
    title:String
  },
  mounted () {
    this.getWindowWidth()
    this.getPicList()
  },
  data () {
    return {
      url: http,
      currentOffset: 0,
      windowSize: 5,
      paginationFactor: 220,
      carouselWidth:'200',
      windowWidth: document.documentElement.clientWidth,  //实时屏幕宽度
      items: []
    }
  },
  computed: {
    atEndOfList() {
      return this.currentOffset <= (this.paginationFactor * -1) * (this.items.length - this.windowSize);
    },
    atHeadOfList() {
      return this.currentOffset === 0;
    },
  },
  // <!--在watch中监听实时宽高-->
  watch: {
    windowWidth (val) {
      let that = this;
      if(val<768) {
        this.carouselWidth = '200'
        this.windowSize = 1
      } else {
        this.carouselWidth = '1080'
        this.windowSize = 5
      }
    }
  },
  methods: {
    getPicList() {
      getAlbumlist().then(res => {
        this.items = res.data.list
      })
    },
    goPicDetail(item) {
      console.log(item)
      this.$router.push({path:'/pic-detail/'+ item.id})
    },
    moveCarousel(direction) {
      // Find a more elegant way to express the :style. consider using props to make it truly generic
      if (direction === 1 && !this.atEndOfList) {
        this.currentOffset -= this.paginationFactor;
      } else if (direction === -1 && !this.atHeadOfList) {
        this.currentOffset += this.paginationFactor;
      }
    },
    getWindowWidth() {
      let that = this;
      // <!--把window.onresize事件挂在到mounted函数上-->
      window.onresize = () => {
        return (() => {
          window.fullWidth = document.documentElement.clientWidth;
          that.windowWidth = window.fullWidth; // 宽
        })()
      };
      if(that.windowWidth<768) {
        this.carouselWidth = '200'
        this.windowSize = 1
      } else {
        this.carouselWidth = '1080'
        this.windowSize = 5
      }
    }
  }
}
</script>
<style>
.card-carousel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.card-carousel {
  display: flex;
  justify-content: center;
  /* width: 1080px; */
}
.card-carousel--overflow-container {
  overflow: hidden;
}
.card-carousel--nav__left, .card-carousel--nav__right {
  display: inline-block;
  width: 15px;
  height: 15px;
  padding: 10px;
  box-sizing: border-box;
  border-top: 2px solid #42b883;
  border-right: 2px solid #42b883;
  cursor: pointer;
  margin: 0 10px;
  transition: transform 150ms linear;
}
.card-carousel--nav__left[disabled], .card-carousel--nav__right[disabled] {
  opacity: 0.2;
  border-color: black;
}
.card-carousel--nav__left {
  transform: rotate(-135deg);
}
.card-carousel--nav__left:active {
  transform: rotate(-135deg) scale(0.9);
}
.card-carousel--nav__right {
  transform: rotate(45deg);
}
.card-carousel--nav__right:active {
  transform: rotate(45deg) scale(0.9);
}

.card-carousel-cards {
  display: flex;
  transition: transform 150ms ease-out;
  transform: translatex(0px);
}
.card-carousel-cards .card-carousel--card {
  margin: 0 10px;
  cursor: pointer;
  box-shadow: 0 4px 15px 0 rgba(40, 44, 53, 0.06), 0 2px 2px 0 rgba(40, 44, 53, 0.08);
  background-color: #fff;
  border-radius: 4px;
  z-index: 3;
  margin-bottom: 2px;
}
.card-carousel-cards .card-carousel--card:first-child {
  margin-left: 0;
}
.card-carousel-cards .card-carousel--card:last-child {
  margin-right: 0;
}
.card-carousel-cards .card-carousel--card img {
  vertical-align: bottom;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  transition: opacity 150ms linear;
  user-select: none;
}
.card-carousel-cards .card-carousel--card img:hover {
  opacity: 0.5;
}
</style>